<template>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item v-for="(bread, index) in breadcrumbList" :to="bread.path" :key="index">{{ bread.title
            }}</el-breadcrumb-item>
    </el-breadcrumb>
</template>

<script lang="ts" setup>
import { ref, reactive, onBeforeMount, watch } from "vue"
import { useRoute, RouteMeta } from "vue-router"

const route = useRoute();
const breadcrumbList = ref([] as RouteMeta[]);

const getBreadcrumbList = () => {
    breadcrumbList.value = route.matched.map(item => item.meta).filter(meta => meta.title);
    // 面包屑的最后一个不需要点击跳转
    if (breadcrumbList.value.length) {
        breadcrumbList.value[breadcrumbList.value.length - 1].path = ""
    }
}
watch(() => route, () => { getBreadcrumbList() }, { deep: true })
onBeforeMount(() => {
    getBreadcrumbList();
})
</script>
<style lang='scss' scoped></style>